<template>
  <ex-dialog
    width="1100px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
      <el-form ref="form"   label-width="150">
				<el-form-item label="选择活动:">
					<el-select v-model="couponIdList" placeholder="请选择活动名称 (可多选可搜索)" ref="elSelect" value-key="couponId"  multiple filterable @remove-tag="removeTag">
						<el-option v-for="item in goodsList"  :key="item.couponId" :label="item.couponName" :value="item" >
						</el-option>
					</el-select>
					<el-button size="mini" type="primary" @click="confirm" style="margin-left: 20px" >确定</el-button>
				</el-form-item>
        <el-form-item label="" prop="">
          <el-table :data="tabelList" v-loading="loading" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中" stripe border >
            <el-table-column label="序号" align="center" type="index" width="64px" />
            <el-table-column label="发放渠道" align="center"  width="120">
              <template slot-scope="scope">
                <dict-tag :options="platformTypeList" :value="scope.row.platformType" />
              </template>
            </el-table-column>
            <el-table-column label="活动名称" align="center" prop="activityName"  />
            <el-table-column label="活动时间" align="center" prop="assetNum" width="160">
              <template slot-scope="scope">
                <div>{{scope.row.activityStartTime}}</div>
                <div>{{scope.row.activityEndTime}}</div>
              </template>
            </el-table-column>
            <el-table-column label="优惠券名称" align="center" prop="couponName"  />
            <el-table-column label="活动状态" align="center" prop="assetNum"  >
              <template slot-scope="scope">
                <span v-if="scope.row.activityStatus == 1">待开始</span>
                <span v-else-if="scope.row.activityStatus ==2">进行中</span>
                <span v-else-if="scope.row.activityStatus ==3">已结束</span>
              </template>
            </el-table-column>
            <el-table-column label="排序" align="center" width="160px">
              <template slot-scope="scope" >
                <el-button size="mini" type="text" @click="orderClick(0,scope.$index)" v-if="scope.$index != 0">上移</el-button>
                <el-button size="mini" type="text" @click="orderClick(1,scope.$index)" v-if="scope.$index < tabelList.length - 1">下移</el-button>
                <el-button size="mini" type="text" @click="orderClick(2,scope.$index)">置顶</el-button>
                <el-button size="mini" type="text" @click="orderClick(3,scope.$index)">置底</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="deleteView(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="sumitLoading">保存提交</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
  </ex-dialog>
</template>

<script>
  import {
    platformCouponConfigSave,
    getPlatformCouponSelect,
    platformCouponConfigList,
  } from '@/api/clientManagement/businessSetting'
  export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    props: {
			visible: Boolean,
			id: String,
			pathType: String,
			areaId: String,
    },
    data() {
      return {
				sumitLoading: false,
				loading: false,
        title: "添加领券活动",
        goodsList: [], //物品选择列表
        tabelList: [],
        // filterCouponIdList:[],
        activityName:'',
        // areaCode:'',
        couponIdList: [], //优惠券列表
        platformTypeList:[],//发放聚道列表
      };
    },
    created() {
      this.getDict()
      this.getInfo()
      // this.getlinkagelist()
    },
    methods: {
      async getDict() {
          var res = await this.$getSelectList("platform_coupon_platform_type")
          this.platformTypeList = res.result[0].dictList;
      },
    //优惠券活动名称下拉查询
     async getGoods(){
        var params = {
          // areaId:this.areaId,
          activityName:this.activityName
        }
        var res = await getPlatformCouponSelect(params)
            this.goodsList = res.result      
      },
      //领券活动配置列表
      getInfo(){
        var params = {
          areaId:this.areaId,
        }
        platformCouponConfigList(params).then(res => {
          var data  = res.result
          this.getGoods()
          this.tabelList = data
          this.couponIdList = this.tabelList
          console.log('this.couponIdList',this.couponIdList)
          console.log('this.goe',this.couponIdList)
        })
      },
      confirm(){
          if(this.couponIdList.length == 0){
            this.$message.error('请选择');
            return
          }
          // this.tabelList = [
          //   ...this.tabelList,
          //   ...this.couponIdList
          // ]
          this.tabelList = this.removeDp(this.tabelList,this.couponIdList)

      },
      // 数组对象合并去重
       removeDp (arr1, arr2) {
        let arr = arr1.concat(arr2)
        let obj = {}
        let newArray = arr.reduce((pre, cur) => {
          if (!obj[cur.couponId]) {
            obj[cur.couponId] = true
            pre.push(cur)
          }
          return pre
        }, [])
        return newArray
        // console.log(newArray)
      },
      // 移除选中标签
      removeTag(e){
        console.log(e)
        // 查询对象数组的下标
        var isShow = this.tabelList.findIndex(item=>item.couponId == e.couponId)
        if(isShow > -1){
          this.tabelList.splice(isShow,1)
        }
        // console.log(isShow)
      },
			//取消
			handleClose() {
				this.$emit('update:visible', false)
      },
			//确认
			handleConfirm(){
				this.$emit('success')
			},
      /** 删除提交按钮deleteWhite */
      deleteView(index,row) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tabelList.splice(index,1)
          var indexOf4 = (this.couponIdList || []).findIndex((item) => item.couponId === row.couponId);
          this.couponIdList.splice(indexOf4,1)
          // this.filterCouponIdList.splice(indexOf4,1)
        }).catch(() => {});
      },
      /** 执行按钮 */
       submitForm() {
           this.sumitLoading = true;
           //  返回id集合
           var couponIdList =  this.tabelList.reduce((pre, el, index) => {
              pre.push(el.couponId);
              return pre;
            }, []);
           var data = {
              areaId:this.areaId,
              couponIdList:couponIdList
            }
            platformCouponConfigSave(data).then(response => {
              setTimeout(()=>{
                this.$message.success('提交成功');
                this.sumitLoading = false;
                this.handleClose();
                this.$emit('success')
              },1000)
            }).catch(() => {
              this.sumitLoading = false;
            });
			},
      //上移、下移、置顶、置底
      orderClick(type, i) {
        
        // 深度拷贝原数组，因为下面会使用 splice 方法，避免影响原数组
        let arr = [...this.tabelList];
        // 默认下标 0
        let index = 0;
              // 判断
        switch (type) {
          case 0: {// 上移
            index = i === 0 ? i : (i - 1);
            break;
          }
          case 1: {// 下移
            index = i === arr.length - 1 ? i : (i + 1);
            break;
          }
          case 2: {// 置顶
            index = 0;
            break;
          }
          case 3: {// 置底
            index = arr.length - 1;
            break;
          }
        }
        // 先删除原有
        let item = arr.splice(i, 1);
        // 再删除新地方
        arr.splice(index, 0, item[0]);
        this.tabelList = arr;
      },
    }
  };

</script>
<style scoped>
  .main {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
  }

  .icon_yes {
    font-size: 28px;
    color: #67c23a;
  }
  .el-select{
    width: 640px;
  }
  .el-button{
    margin: 0 20px;
  }
</style>
